<template>
<div>
    <div class="homeheader">
      <div>
          <p>
          <span class="iconfont icon-sousuo"></span>
         <input type="text" placeholder="JavaScript实战教学">
          </p>
        <span class="iconfont icon-gouwuche"></span>
      </div>

  </div>
  <div class="classification">
    <div class="left-box">
       <van-sidebar v-model="activeKey">
  <van-sidebar-item title="前端开发"  @click="tem='Front'" />
  <van-sidebar-item title="后端开发" @click="tem='Behind'" />
  <van-sidebar-item title="移动开发"  @click="tem='Mobile'" />
  <van-sidebar-item title="计算机基础" @click="tem='Basis'" />
  <van-sidebar-item title="前沿技术" @click="tem='Technology'" />
  <van-sidebar-item title="云计算&大数据" @click="tem='Cloud'" />
  <van-sidebar-item title="运维&测试" @click="tem='Test'" />
  <van-sidebar-item title="数据库"  @click="tem='Database'" />
  <van-sidebar-item title="UI设计&多媒体" @click="tem='Ui'" />
  <van-sidebar-item title="游戏" @click="tem='Game'" />
</van-sidebar>
    </div>
  
    <component :is="tem"></component>
    <Bottom/>
  </div>
</div>
</template>

<script>
import Basis from "@/components/classificationcomp/basis.vue"
import Behind from "@/components/classificationcomp/behind.vue"
import Cloud from "@/components/classificationcomp/cloud.vue"
import Database from "@/components/classificationcomp/database.vue"
import Front from "@/components/classificationcomp/front.vue"
import Game from "@/components/classificationcomp/game.vue"
import Mobile from "@/components/classificationcomp/mobile.vue"
import Technology from "@/components/classificationcomp/technology.vue"
import Test from "@/components/classificationcomp/test.vue"
import Ui from "@/components/classificationcomp/ui.vue"
export default {
  data(){
    return{
      activeKey: 0,
      tem:"Front"
    }
  },
  methods:{
   
  },
  components:{
    Basis,Behind,Cloud,Database,Front,Game,Mobile,Technology,Test,Ui
  },
  directives:{
    red:{
      inserted(el){
        el.style.color="red"
      }
    }
  }
}
</script>

<style scoped>
.homeheader{
  height: 0.45rem;
  width: 100%;
  background-color: white;
  position: fixed;
}
.homeheader>div{
  width: 100%;
  height: 0.28rem;
  display: flex;
  justify-content: center;
margin-top: 0.1rem;
}
.homeheader>div>p{
  width: 2.87rem;
  height: 0.28rem;
  /* line-height: 0.28rem; */
  background-color:#ededed;
  border-radius: 0.5rem;
  padding-left: 0.1rem;
   margin: auto;
   display: flex;
   overflow: hidden;
}
.homeheader>div>p>span{
  font-size: 0.12rem;
  
  line-height: 0.28rem;
  height: 0.28rem;
  color: #adadadad;
}
.homeheader>div>p>span:nth-child(1){
  color: black;
  width: 0.12rem;
}
.homeheader>div>p>input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color:#ededed;
  margin-left: 0.1rem;
  color: #000;
 
}
.homeheader>div>span{
  width: 0.5rem;
  height: 0.28rem;
  line-height: 0.28rem;
}
.icon-gouwuche{
  text-align: center;
  font-size: 20px;
  color: black;
}

.classification{
  display: flex;
  padding-top: 0.45rem;
}
.left-box{
  position: fixed;
  overflow-y: auto;
}
.van-sidebar-item{
  padding: 13px 12px;
}
</style>